import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import {Icon,Button} from 'antd-mobile'
import {Link} from 'react-router'

export default class Home extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }
  constructor(props) {
    super(props);
    this.state={
        list:[
            {'name':'xx公寓.保利叶之林(一期)','lou':'12.2m² | 05/14层','money':'￥1830元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(二期)','lou':'13.5m² | 05/14层','money':'￥1630元/月','img':'./imgs/zz2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(三期)','lou':'15.1m² | 05/14层','money':'￥1430元/月','img':'./imgs/sy2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(四期)','lou':'12.7m² | 05/14层','money':'￥1530元/月','img':'./imgs/sy1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(五期)','lou':'16.2m² | 05/14层','money':'￥1330元/月','img':'./imgs/zz2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(一期)','lou':'17.2m² | 05/14层','money':'￥1130元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(四期)','lou':'22.2m² | 05/14层','money':'￥1630元/月','img':'./imgs/sy2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(三期)','lou':'10.2m² | 05/14层','money':'￥1860元/月','img':'./imgs/sy1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(一期)','lou':'12.2m² | 05/14层','money':'￥1680元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'}
        ],
        list2:[
            {'name':'xx公寓.保利叶之林(一期)','lou':'12.2m² | 05/14层','money':'￥4830元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(二期)','lou':'13.5m² | 05/14层','money':'￥5830元/月','img':'./imgs/zz2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(三期)','lou':'15.1m² | 05/14层','money':'￥5830元/月','img':'./imgs/sy2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(四期)','lou':'12.7m² | 05/14层','money':'￥4830元/月','img':'./imgs/sy1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(五期)','lou':'16.2m² | 05/14层','money':'￥3830元/月','img':'./imgs/zz2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(一期)','lou':'17.2m² | 05/14层','money':'￥6830元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(四期)','lou':'22.2m² | 05/14层','money':'￥4330元/月','img':'./imgs/sy2.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(三期)','lou':'10.2m² | 05/14层','money':'￥4230元/月','img':'./imgs/sy1.png','address':'距7号线企划路515米'},
            {'name':'xx公寓.保利叶之林(一期)','lou':'12.2m² | 05/14层','money':'￥5130元/月','img':'./imgs/zz1.png','address':'距7号线企划路515米'}
        ]
    }

  }

  componentWillMount() {
    //获取token
  }

  goHouseDetail=()=>{
    this.context.router.push({
        pathname: '/Home/HouseDetail'

    })
    localStorage.setItem('name','立即签约');
    localStorage.getItem('type','0')
  }

  goHouseDetaila1=()=>{
    this.context.router.push({
        pathname: '/Home/HouseDetail'

    })
    localStorage.setItem('name','立即签约');
    localStorage.getItem('type','1')
  }
  render() {
    let {list,list2}=this.state;
    let group = localStorage.getItem('group');
    let listGroup;
    if(group=='0'){
        listGroup=list.map((item, index)=>{
            return(
                <li onClick={this.goHouseDetail.bind(this)}>
                    <img src={item.img} alt=""/>
                    <div>
                        <h2>{item.name}</h2>
                        <p><span>{item.lou}</span> <span className='money'>{item.money}</span></p>
                        <div className='address'><img src="./imgs/address.png" alt=""/>{item.address}</div>
                        <div className='button'>
                            <a>短租</a> <a>离地铁近</a> <a>木棉4.0</a>
                        </div>
                    </div>
                </li>
            )
        })
    }else{
        listGroup=list2.map((item, index)=>{
            return(
                <li onClick={this.goHouseDetaila1.bind(this)}>
                    <img src={item.img} alt=""/>
                    <div>
                        <h2>{item.name}</h2>
                        <p><span>{item.lou}</span> <span className='money'>{item.money}</span></p>
                        <div className='address'><img src="./imgs/address.png" alt=""/>{item.address}</div>
                        <div className='button'>
                            <a>短租</a> <a>离地铁近</a> <a>木棉4.0</a>
                        </div>
                    </div>
                </li>
            )
        })
    }

    return(

        <div style={{paddingTop: '1rem'}}>
            <CommonHeader imgUrl='./imgs/map.png' name='房屋信息'/>
            <input type="text" placeholder='输入您想住的小区或区域' className='searchTop'/>
            <Icon type='search' className= 'searchIcon'/>
            <div className='tabSelect'>
                <ul>
                    <li>区域<img src="./imgs/down.png" alt=""/></li>
                    <li>租金<img src="./imgs/down.png" alt=""/></li>
                    <li>房型<img src="./imgs/down.png" alt=""/></li>
                    <li>面积<img src="./imgs/down.png" alt=""/></li>
                    <li>楼层<img src="./imgs/down.png" alt=""/></li>
                </ul>
            </div>

            <div className='homeList'>
                <ul>
                    {listGroup}
                </ul>

            </div>
        </div>
    )
  }

}